<script setup lang="ts">
  import { ref } from "vue"
  const props = defineProps({
    highlight: {
      type: Boolean,
      default: true
    },
    expandAll: {
      type: Boolean,
      default: true
    },
    treeData: {
      type: Array,
      default: () => []
    },
    currentKey: {
      type: String,
      default: ''
    },
    children: {
      type: String,
      default: 'children'
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    label: {
      type: String,
      default: 'label'
    }
  })

  const emit = defineEmits(['nodeClick'])
  const pbTreeRef = ref()
  const defaultProps = computed(() => {
    console.log({
      children: props.children,
      label: props.label
    });
    return {
      children: props.children,
      label: props.label,
    }
  })
  const setCheckedKeys = (keys, leafOnly) => {
    pbTreeRef.value.setCheckedKeys(keys, leafOnly)
  }
  const nodeClick = ({ curNode, parentNode }) => {
    emit('nodeClick', { curNode, parentNode })
  }
  defineExpose({ setCheckedKeys })
</script>

<template>

  <div class="content-left">
    <pb-tree @nodeClick="nodeClick" ref="pbTreeRef" :nodeKey="nodeKey" :currentKey="currentKey" :treeData="treeData"
      :highlight="highlight" :expandAll="expandAll" :defaultProps="defaultProps"></pb-tree>
  </div>


</template>

<style lang="scss" scoped>
  .content-left {
    width: 16%;
    height: 100%px;
    padding: 16px;
    border-right: 1px solid rgba(0, 0, 0, 0.10);
  }
</style>
